<template>
    <div class="dialog-box">
        <el-dialog class="dialog" top="80px" v-model="visible" title="流水记录" draggable overflow :close-on-click-modal="false"
            :close-on-press-escape="false" :show-close="false">
            <!-- <el-divider /> -->
            <template #header="{ close, titleId, titleClass }">
                <div class="my-header">
                    <h4 :id="titleId" :class="titleClass">流水记录</h4>
                    <el-button class="close-btn" @click="handleCancel">
                        关闭
                    </el-button>
                </div>
            </template>
            <el-tabs v-model="activeName"  type="demo-tabs" class="tabs" @tab-change="tabChange">
                <el-tab-pane label="充值记录" name="1">
                    <Save ref="saveRef" :user="user" :currentCard="currentCard" />
                </el-tab-pane>
                <el-tab-pane label="交易记录" name="2">
                    <Transaction ref="transactionRef" :user="user" :currentCard="currentCard" />
                </el-tab-pane>
                <el-tab-pane label="积分记录" name="3">
                    <Integral ref="integralRef" :user="user" :currentCard="currentCard" />
                </el-tab-pane>
                <el-tab-pane label="卡券记录" name="4">
                    <Ticket ref="ticketRef" :user="user" :currentCard="currentCard" />
                </el-tab-pane>
            </el-tabs>

            <!-- <div class="footer-box">
                <el-button class="cancel" @click="handleCancel">关闭</el-button>
                <el-button class="submit" @click="handleSubmit">关闭</el-button>
            </div> -->
            <!-- <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleCancel">Cancel</el-button>
                <el-button type="primary" @click="visible = false">
                    Confirm
                </el-button>
            </div>
        </template> -->
        </el-dialog>
    </div>
</template>
  
<script setup>
import Save from './report/save.vue'
import Transaction from './report/transaction.vue'
import Integral from './report/integral.vue'
import Ticket from './report/ticket.vue'
import { onMounted, reactive, ref } from 'vue';
const props = defineProps({
    visible: {
        type: Boolean,
        required: false,
    }
})
const visible = toRef(props, 'visible')


// 打开窗口
let user = reactive({ re: {} })
let currentCard = ref(0)
const open = (data) => {
    // console.log('data :>> ', data);
    user.re = data.user
    currentCard.value = data.currentCard
    activeName.value = data.activeName
    tabChange(activeName.value,)
    
}
// 暴露方法
defineExpose({ open })

// 点击tabs
let activeName = ref()
const saveRef = ref()
const transactionRef = ref()
const integralRef = ref()
const ticketRef = ref()
const tabChange = (tab) => {

    switch (tab) {
        case '1':
            saveRef.value.getTableData(user.re, currentCard.value)
            break;
        case '2':
            transactionRef.value.getTableData(user.re, currentCard.value)
            break;
        case '3':
            integralRef.value.getTableData(user.re, currentCard.value)
            break;
        case '4':
            ticketRef.value.getTableData(user.re, currentCard.value)
            break;
        default:
            break;
    }
}

// 取消
const emit = defineEmits(['emitCancel', 'emitSubmit'])
const handleCancel = (params) => {
    emit('emitCancel', 'cancel')
}
// 确认
const handleSubmit = (params) => {
    emit('emitSubmit', 'Submit')
}



</script>
  
<style  lang="scss" scoped>
@import '@/styles/com_style_input.css';
.dialog-box {

    ::v-deep {
        .el-dialog {
            width: 1500px;
            // min-height: 800px;
            border-radius: 16px;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 40px;
        }

        .el-dialog__title {
            font-weight: bold;
            font-size: 20px;
            color: #212121;
            line-height: 36px;
            // padding-left: 60px;
        }

        .el-divider {
            margin: 0;
        }

        .el-form-item__label {
            font-size: 16px;
            color: #212121;

        }

        .el-tabs--top .el-tabs__item.is-top{
            padding: 10px !important;
            margin-right: 20px;
        }
   
        
    }

    .footer-box {
        margin-top: 60px;
        display: flex;
        justify-content: center;

        .cancel {
            width: 160px;
            height: 60px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #FF6A00;
            font-size: 24px;
            color: #FF6A00;
        }

        .submit {
            width: 160px;
            height: 60px;
            background: #FF6A00;
            border-radius: 8px;
            font-size: 24px;
            color: #FFFFFF;
            margin-left: 30px;
        }
    }


}

.tabs {

    margin-top: 20px;
}

.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
    
    .close-btn {
        width: 100px;
        height: 48px;
        background: #CCCCCC;
        border-radius: 8px;
    }
}


:deep(.el-tabs__nav .el-tabs__item.is-active) {

//  background: #ffe566;
  border-bottom: 2px solid #FF6A00;
  color: #ff6a00;

}
::v-deep(.el-divider .el-divider--horizontal) {
    border: none;
}
::v-deep .el-tabs__item:hover {
    color: #212121;
}
:deep(.el-table .el-table__header thead tr th) {
  background-color: #f9f9f9;
  border: none;
}
</style>
  